<template>
  <div>
      <nut-popup :style="{ height:'100%' }" v-model="show">
          <nut-navbar
      @on-click-back="back"
      :rightShow="false"
    >MV详情</nut-navbar>
    <div v-if="this.mvurl">
      <nut-video :sources="[{src:this.mvurl,type: 'video/mp4'}]" :options="options"  v-if="this.show"></nut-video>
    </div>
    <div class="content" v-if="this.mvcontent">
      <h3 class="title">
        {{this.mvcontent.name}}
        <span>{{this.mvcontent.publishTime}}</span>
      </h3>
      <p class="singer">{{this.mvcontent.artistName}}</p>
      <p class="detail">{{this.mvcontent.desc}}</p>
    </div>
      </nut-popup>
    
  </div>
</template>
<script>
import { url, mv,} from "../../api/api";
export default {
    props:["tname","showmv","closelist","curid"],
  data() {
    return {
        show:false,
      id: "", //  当前点击的视频id
      mvcontent: "", //  mv信息
      mvurl: "", //  请求的视频地址
      options: {
        autoplay: true,
        volume: 0.6,
        poster: "",
        controls: true
      }
    };
  },
  mounted() {
    
  },
  methods: {
      //  关闭回调
      back(){
          this.show = false
          this.closelist("showmv")
      },
    //  获取视频信息
    getmv(id) {
      this.$axios
        .get(`${url}${mv}`, {
          params: {
            mvid: id
          }
        })
        .then(
          data => {
            if (data.data.code == 200) {             
              this.mvcontent = data.data.data;
              this.mvurl = data.data.data.brs['480'];
            }
          },
          err => {
            this.$notify.danger(err);
          }
        );
    },
  },
  watch:{
      showmv(){
          this.show = this.showmv
      },
      curid(){
          this.id = this.curid
          if(this.id != ''){
            this.getmv(this.id);
                
          }
      }
  }
};
</script>
<style scoped>
.popup-box {
    width: 100%;
}
.content {
    padding: 10px;
}
.content .title {
  height: 40px;
  line-height: 40px;
}
.content .title span {
  float: right;
}
.content .singer {
  color: #999;
}
.content .detail{
    font-size: 14px;
    line-height: 30px;
    margin: 15px
}
</style>